<template>
  <Result status="403" title="403" subtitle="对不起，您没有访问该资源的权限">
    <template #title v-if="name">
      没有【
      <a @click="onApply()">{{ name }}</a>
      】权限
    </template>
    <template #extra>
      <Space justify="center">
        <Button type="primary" @click="$router.back()">返回</Button>
        <Button type="primary" @click="login.logout({ url })">重新登录</Button>
      </Space>
    </template>
  </Result>
</template>
<script setup>
import { Button, Result, Space } from '@idmy/ui'
import { appConfig, http, useLoading } from '@idmy/core'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const url = computed(() => {
  return location.protocol + '//' + location.host
})

const api = roleKey => {
  return http.get(`/api/auth/roleName/${appConfig.appKey}/${roleKey}`, null, { appKey: 'oauth' })
}

const route = useRoute()
const name = ref('')
useLoading(async () => {
  name.value = await api(route.query.role)
}, Boolean(route.query.role))

const onApply = () => {
  Dialog.info({ title: '去申请权限', content: '该功能还未开发……' })
}
</script>
